<template>
  <div id="waitingInquiry">
    <div ref="head">
      <pub-header title="询价中" style="position: absolute; top: 0; left: 0; right: 0; z-index: 9;">
        <span @click="handleCancelOrder(filterItem.oid)">取消招标</span>
      </pub-header>
    </div>
    <div ref="content" style="overflow-y: auto;-webkit-overflow-scrolling: touch;">
    <scroller
      :on-refresh="refresh"
      :style="{marginTop: scrollerMarTop}"
      style="padding-top: 0.9rem;">
      <load-more tip="加载数据中..." v-if="!isloading"></load-more>
      <div v-if="isloading">
        <div class="waiting" v-if="!dataObj.totalcount">
          <img src="../../static/img/waiting.png"
               style="width: 1.35rem; height: 0.9rem; display: block; margin: 0 auto;"/>
          <p style="line-height: 0.8rem; font-size: 0.34rem;">
            <b>已经通知
              <countup :end-val="parseInt(dataObj.push_count)" :duration="3" class="countupd text-orange"></countup>
              位司机报价,报价剩余时间
            </b>
          </p>
        </div>
        <div class="items">
          <div class="title flex flex-middle flex-space-between vux-1px-b">
            <div><b>{{dataObj.time_pc}} 前取货</b></div>
          </div>
          <div class="address vux-1px-b">
            <div class="addresslist overflowtext flex flex-middle">
              <i class="icon icon-quan1"></i><span>{{dataObj.p_addr}}</span>
            </div>
            <div class="addresslist overflowtext flex flex-middle">
              <i class="icon icon-quan1"></i><span>{{dataObj.get_addr}}</span>
            </div>
          </div>
        </div>


        <div>
          <div v-if="dataObj.totalcount" class="filter vux-1px-b" @click="modal = true">{{actionsheets}} <i
            class="icon icon-filter"></i></div>
          <load-more tip="筛选排序中..." v-if="!isloadingFilter"></load-more>
          <div class="null" v-if="!dataObj.totalcount">
            <p>暂无报价~~</p>
          </div>

          <div v-if="isloadingFilter" class="list-item" v-for="(item, index) in dataObj.data" :key="index">
            <div class="penson">
              <div class="headimg"  @click="toDriver(item.uid)"><img :src="item.face? item.face: '../../static/img/noheadpic.png'"/></div>
              <div class="flex-auto">
                <p class="flex flex-middle" @click="toDriver(item.uid)">
                  <span class="overflowtext" style="font-size: 0.32rem;">{{item.realname || item.nick_name || '未设置昵称'}}</span>
                  <i class="icon icon-qiye"></i>
                </p>
                <div class="flex flex-middle">
                  <rater disabled v-model="item.comment_score" active-color="#ff9800"></rater>
                  <span style="color: #ff9800; margin-left: 0.15rem; font-size: 0.26rem;">{{item.comment_score}}<span
                    style="font-size: 0.24rem;">分</span></span>
                </div>
                <p class="flex text-gray" style="line-height: 0.34rem;">
                  <i class="icon icon-map" style="font-size: 0.3rem;"></i>
                  <span class="overflowtext">{{ item.location || item.user_address || item.address }}</span>
                  <i class="icon icon-daohang" style="font-size: 0.3rem; color: #0d83d3;"></i>
                </p>
              </div>
              <div class="other text-orange text-right">
                <a :href="'tel:' + item.phone" class="text-orange"><i class="icon icon-phone"></i></a>
              </div>
            </div>
            <div class="actions flex vux-1px-t flex-middle" style="justify-content: flex-end;">
              <div class="text-orange" style="margin-right: 0.2rem">
                <small>￥</small>
                <span>{{item.freight}}</span>元
              </div>
              <div>
                <x-button type="primary" action-type="button" mini @click.native="handleChooseDriver(item.uid, item.oid)">选Ta</x-button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </scroller>
    </div>
    <actionsheet v-model="modal" :menus="actionsheetList" @on-click-menu="handleActionsheetModal"></actionsheet>
  </div>
</template>
<script>
  import Vue from 'vue'
  import PubHeader from '../components/PubHeader.vue'
  import {Rater, Clocker, TransferDom, Sticky, LoadMore, Countup} from 'vux'
  export default{
    directives: {
      TransferDom
    },
    name: 'waitingInquiry',
    components: {
      PubHeader,
      Rater,
      Clocker,
      Countup,
      LoadMore,
      Sticky
    },
    computed: {
      serverID() {
        return this.$store.state.userInfo.service_id || 0
      },
      scrollerMarTop() {
        const u = navigator.userAgent
        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid? '-0.2rem': '0rem'
      }
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const headerHeight = this.$refs['head'].offsetHeight
      const hei = (bodyHeight - headerHeight)
      this.$refs['content'].style.height = hei + 'px'
    },
    created() {
      this.getData()
    },
    data() {
      return {
        uid: this.$store.state.userInfo.uid,
        status1: {
          pulldownStatus: 'default'
        },
        timer: '',
        isloading: false,
        isloadingFilter: true,
        filterItem: {
          oid: this.$route.query.oid,
          page: 1,
          pagesize: 10,
          filter: '',
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid
        },
        is_collection: false,
        dataObj: [],
        data3: 4,
        value: [],
        modal: false,
        actionsheets: '全部',
        actionsheetList: [{
          label: '全部',
          value: 'all'
        }, {
          label: '价格最低',
          value: 'price'
        }, {
          label: '信用值',
          value: 'credit'
        }, {
          label: '评价最好',
          value: 'comment_score'
        }, {
          label: '成交量',
          value: 'donum'
        }]
      }

    },
    methods: {
      toDriver(uid) {
        if(uid) {
            this.$router.push({path: '/driverPage', query: {id: uid, service: this.type}})
        }
      },
      refresh(done) {
        setTimeout(() => {
          this.getData(done())
        }, 1000)
      },
      getData(done = () => {}) {
        this.$http.post($config.host + '/api/Inquirycityvehicle/getQuotesOrder', qs.stringify(this.filterItem)).then((res) => {
          const {code, data, msg} = res.data
          console.log(data)
          if (code == '1') {
            this.dataObj = data
            this.timer = data.time_pc
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
          done()
          this.isloading = true
          this.isloadingFilter = true
        }).catch((err) => {
          this.isloading = true
          done()
          this.isloadingFilter = true
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      },
      handleActionsheetModal(val) {
        if (val == this.filterItem.filter || (val == 'all' && !this.filterItem.filter)) {
          return
        }
        this.isloadingFilter = false
        this.filterItem.filter = val == 'all' ? '' : val
        const pet = this.actionsheetList.find(pet => pet.value == val)
        this.actionsheets = pet.label
        this.getData()
      },
      handleCancelOrder(oid) {
        this.$vux.confirm.show({
          title: '<i class="icon icon-gantanhao"></i>',
          content: '已通知一大波司机来报价，是否再等一会?',
          confirmText: '再等等',
          cancelText: '不等了',
          onCancel: () => {
            this.$vux.loading.show({text: '招标取消中'})
            this.$http.post($config.host + '/api/Inquirycityvehicle/cancelOrder', qs.stringify({
              uid: this.uid,
              oid: oid,
              client: $config.client_type,
              device: $config.device_type,
              token: this.$store.state.userInfo.token
            })).then((res) => {
              this.$vux.loading.hide()
              const {code, msg} = res.data
              if (code == '1') {
                this.$vux.toast.text('取消成功', 'middle')
                this.$router.go(-1)
              } else if (code == '3') {
                this.$vux.toast.text($config.loginErrMsg, 'middle')
                this.$router.push({path: '/logout'})
              } else {
                this.$vux.toast.text(msg, 'middle')
              }
            }).catch((err) => {
              this.$vux.loading.hide()
              this.$vux.toast.text($config.errMsg, 'middle')
            })

          }
        })
      },
      handleChooseDriver(other_uid, oid) {
        this.$vux.loading.show({
          text: '正在调度中，请勿操作'
        })
        this.$http.post($config.host + '/api/Inquirycityvehicle/companyChooseDriver', qs.stringify({
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          uid: this.$store.state.userInfo.uid,
          oid,
          other_uid
        })).then((res) => {
          this.$vux.loading.hide()
          const {code, msg} = res.data
          if(code == '1') {
            this.$router.go(-1)
            this.$vux.toast.text('调度成功，等待司机完成任务！', 'middle')
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch((err) => {
          this.$vux.loading.hide()
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      }
    }
  }
</script>
<style scoped>
  @import '../styles/order.css';

  .list-item {
    margin-top: 0.15rem;
    background: #fff;
  }

  .list-item:last-of-type {
    margin-bottom: 0.35rem;
  }

  .filter {
    background: #fff;
    height: 1rem;
    line-height: 1rem;
    margin-top: 0.15rem;
    text-align: center;
  }

  .filter .icon {
    font-size: 0.3rem;
    color: #999;
  }

  .waiting {
    margin-top: 0.1rem;
    padding: 0.3rem 0.2rem;
    background: #fff;
    text-align: center;
  }

</style>
